<template>
    <div class="CompontensViews">
        <div class="bs-tabs">
            <div>
                <el-button :type="activeFlag == index ? 'primary' : ''" size="mini" v-for="(value, index) in getTabsList"
                    :key="index" @click="activeFlag = index" style="width: 15% !important;">
                    {{ value.title }}
                </el-button>
            </div>
            <!-- <div v-if="activeFlag != 2" class="addBtn">
                <el-button type="default" :class="isAddFlg && activeFlag == 0 ? 'red' : ''" size="mini"
                    style="margin-right: 8px;" @click="addFn">追加</el-button>
                <el-button type="default" size="mini" @click="delFn"
                    :disabled="isAddFlg || (drwMgtDataLength == 0 && activeFlag == 0) || ($refs.tab3.Data.length == 0 && activeFlag == 2)">削除</el-button>
            </div> -->
        </div>

        <div class="add">
            <span></span>
            <div v-if="activeFlag == 2">
                <el-button type="default" :class="isAddFlg && activeFlag == 0 ? 'red' : ''" size="mini"
                    style="margin-right: 8px;" @click="addFn">追加</el-button>
                <el-button type="default" size="mini" @click="delFn"
                    :disabled="isAddFlg || (drwMgtDataLength == 0 && activeFlag == 0) || ($refs.tab3.Data.length == 0 && activeFlag == 2)">削除</el-button>
            </div>
            <div v-if="activeFlag == 1" style="font-weight: 700;">
                ※　肉厚仕様に「周期設定係数」が登録されている場合は、その値を優先します。
            </div>
        </div>

        <div class="container">
            <tab1 ref="tab1" v-show="activeFlag == 0" :PltCode="PltCode" :Code="Code" @isAddFlgFn="isAddFlgFn"
                :Label="Label" @isChangeFlgFn="isChangeFlgFn">
            </tab1>

            <tab2 ref="tab2" v-show="activeFlag == 1" :PltCode="PltCode" :Code="Code" @isAddFlgFn="isAddFlgFn"
                :Label="Label" @isChangeFlgFn="isChangeFlgFn" :dmgCode="dmgCode">
            </tab2>

            <tab3 ref="tab3" v-show="activeFlag == 2" :PltCode="PltCode" :Code="Code" :Label="Label"
                @isChangeFlgFn="isChangeFlgFn" :leftCodName="leftCodName">
            </tab3>

            <tab4 ref="tab4" v-show="($hasOption('OPT_FOC') && activeFlag == 4) || (!$hasOption('OPT_FOC') && activeFlag == 3)" 
                :PltCode="PltCode" :Code="Code" @isChangeFlgFn="isChangeFlgFn">
            </tab4>

            <PartsInspectionResult ref="PartsInspectionResult" v-show="$hasOption('OPT_FOC') && activeFlag == 3" 
                :dmgCode="dmgCode" :activeFlag="activeFlag" v-if="$hasOption('OPT_FOC')">
            </PartsInspectionResult>

            <div class="footer">
                <el-button @click="CancelFn" v-show="!$hasOption('OPT_FOC') || ($hasOption('OPT_FOC') && activeFlag !== 3)">Cancel</el-button>

                <!-- <el-button class="okBTn" :disabled="isChangeFlg"
                    @click="isClickSaveBtn = true, saveFn()">編集内容を保存</el-button> -->

                <el-button type="primary" class="okBTn" @click="isClickSaveBtn = true, saveFn()" v-show="!$hasOption('OPT_FOC') || ($hasOption('OPT_FOC') && activeFlag !== 3)">
                編集内容を保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import tab1 from './tabs/tab1';
import tab2 from './tabs/tab2';
import tab3 from './tabs/tab3';
import tab4 from './tabs/tab4';
import PartsInspectionResult from "@/components/Customize/Customer127/PartsInspectionResult/views/PartsInspectionResult";
import { GetEquipVerify, GetInitSysIntelligence, UpdEquipInformation, DelSysIntelligence, getEnvLabel } from "@/api/api";

import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
import _ from 'lodash-es';
export default {
    name: "BasicStyleCompontens",
    props: ["PltCode", "Code", "drwMgtDataLength", "leftCodName", "dmgCode"],
    data() {
        return {
            isClickSaveBtn: false,
            tabs_list: [
                { title: "設備情報", isShow: true },
                { title: "総合評価", isShow: true },
                { title: "損傷要因", isShow: true },
                { title: "部位別検査結果", isShow: this.$hasOption('OPT_FOC') },
                { title: "図書関連付け", isShow: true }
            ],
            activeFlag: 0,
            isAddFlg: false,
            Label: [
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 1
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 2
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 3
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 4
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 5
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 6
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 7
                }
            ],

            isChangeFlg: false,  //  是否编辑 的标识    true-?没有更改，则不可点击，false-?更改过可点击
        };
    },
    components: {
        tab1, tab2, tab3, tab4, PartsInspectionResult
    },
    watch: {

    },
    computed: {
        getTabsList() {
            var visibleTabsList = this.tabs_list.filter((tab) => tab.isShow);
            return visibleTabsList;
        }
    },
    methods: {
        isChangeFlgFn(e) {
            this.isChangeFlg = e;
            this.$store.commit("changeIsCurrentNext", this.isChangeFlg);
            /**
             * 1。  isCurrentNext。false=>不往下，即出保存弹框。
             */
            console.log('changeIsCurrentNext', this.$store.state.isCurrentNext);
        },
        //  总体追加番号按钮
        addFn() {
            //  tab3
            if (this.activeFlag == 2) {
                this.$refs.tab3.addFn();
            }
        },

        delFn() {
            //  tab3
            if (this.activeFlag == 2) {
                this.$refs.tab3.delFn();
            }
        },
        // 子组件让按钮变色
        async isAddFlgFn(flg) {
            this.isAddFlg = flg;
        },
        //  保存
        async saveFn() {
            let tips = await this.GetSysIntelligenceMsgFn(1);
            // let tips = '111';
            this.$confirm(tips, '', {
                confirmButtonText: this.$t("message.public.confirm"),
                cancelButtonText: this.$t("message.public.cancel"),
                type: "warning",
            })
                .then(async () => {

                    // "pltCode": this.PltCode,
                    //     "code": this.Code,
                    //         "MacName": this.leftCodName,
                    //             "dmgCode": this.dmgCode,

                    let dataJson = {
                        "pltCode": this.PltCode,
                        "code": this.Code,
                        "MacName": this.leftCodName,
                        "dmgCode": this.dmgCode,
                        "isEdit": 1,
                        "equipInformation": {
                            "code": 22,
                            "comment1": "設備の特徴　登録テスト1",
                            "comment2": "項目　登録テスト2",
                            "comment5": "面からの開放要求　登録テスト3",
                            "equipOperCondiList": [
                                {
                                    "clPara": "test1",
                                    "clType": "1112",
                                    "clUnit": "℃3",
                                    "clNote": "テスト4",
                                    "code": 22,
                                    "clCode": 1
                                }
                            ]
                        },
                        "equipGeneralEvaluation": {
                            "comment3mk": 2,
                            "comment3": "総合評価登録テストaaa",
                            "crit_cyc": 5,
                            "thck_coef": 0.6,
                            "next_insp": "2024-05"
                        },
                        "causeOfInjury": [
                            {
                                "dispNo": "*",
                                "dmgClsName": "湿性腐食",
                                "dmgName": "NH3-H2S-H2O腐食",
                                "mtrCls": "炭素鋼",
                                "machanism": "湿性 H2S-NH3-H2O 環境となる、重油脱硫反応塔下流および排水処理蒸留塔系で、ｴﾛｰｼﾞｮﾝ・ｺﾛｰｼﾞｮﾝ状に鋼が浸食される現象。腐食部にはｽｹｰﾙが付着しない。Ｋp値と流速で腐食速度が左右される。",
                                "expPart": "重油脱硫反応塔下流",
                                "ispWayName": "ＶＩ，ＵＴＭ，ＵＴ，水浸ＵＴ，ＲＴ，ＲＦＥＴ",
                                "exaFact": "流速＞４．６ｍ／ｓ，ＫＰ値＞０．４",
                                "code": 22,
                                "damCode": 4,
                                "damClsCode": 97,
                                "damNameCode": 2,
                                "mtrClsCode": 1
                            },
                            {
                                "dispNo": "*",
                                "dmgClsName": "乾性腐食",
                                "dmgName": "ｴﾛｰｼﾞｮﾝ(機械的)",
                                "mtrCls": "炭素鋼",
                                "machanism": "流体の衝突などにより固体表面が機械的に損傷されて剥離する現象。",
                                "expPart": null,
                                "ispWayName": "ＶＩ，ＵＴＭ，ＵＴ，水浸ＵＴ，ＲＴ，ＲＦＥＴ",
                                "exaFact": null,
                                "code": 22,
                                "damCode": 5,
                                "damClsCode": 98,
                                "damNameCode": 7,
                                "mtrClsCode": 1
                            },
                            {
                                "dispNo": "*",
                                "dmgClsName": "HIC",
                                "dmgName": "HIC",
                                "mtrCls": "炭素鋼",
                                "machanism": "炭素鋼はＨ2Ｓ、ＨFを含む湿潤環境下で腐食により発生した水素が鋼中に侵入し、介在物に集積して割れや膨れを生じる現象。",
                                "expPart": null,
                                "ispWayName": "ＶＩ，ＭＴ，ＰＴ，ＵＴ，ＳＵＭＰ",
                                "exaFact": null,
                                "code": 22,
                                "damCode": 3,
                                "damClsCode": 92,
                                "damNameCode": 1,
                                "mtrClsCode": 1
                            }
                        ],
                        "relatedBooks": [
                        ]
                    }
                    dataJson.equipInformation = this.$refs.tab1.Data;
                    console.log('this.$refs.tab2.Data', this.$refs.tab2.Data);
                    let temp = {
                        "comment3mk": Number(this.$refs.tab2.Data.subLabel[1].values[1]) || 0,   // ランク
                        "comment3": this.$refs.tab2.Data.equipGenEvation,   // 総合評価
                        "crit_cyc": this.$refs.tab2.Data.subLabel[1].values[2] ? Number(this.$refs.tab2.Data.subLabel[1].values[2]) : null,   // 周期(年)
                        "thck_coef": this.$refs.tab2.Data.subLabel[3].values[1] ? parseFloat(this.$refs.tab2.Data.subLabel[3].values[1]) : null,   // 寿命評価係数
                        "next_insp": this.$refs.tab2.Data.subLabel[8].values[1],   // 次回開放検査年(見直し後)
                    }
                    dataJson.equipGeneralEvaluation = temp;

                    dataJson.causeOfInjury = this.$refs.tab3.Data;
                    dataJson.relatedBooks = this.$refs.tab4.Data;

                    // let operate = 'up';
                    // if (this.$refs.tab3.Data.length > this.$refs.tab3.DataClone.length) operate = 'in';
                    // if (this.$refs.tab3.Data.length == this.$refs.tab3.DataClone.length) operate = 'up';
                    // if (this.$refs.tab3.Data.length < this.$refs.tab3.DataClone.length) operate = 'de';
                    // dataJson.Insert = operate == 'in' ? 1 : 2;
                    // dataJson.Update = operate == 'up' ? 1 : 2;
                    // dataJson.Delete = operate == 'de' ? 1 : 2;

                    // 追加行已赋值insert，削除行，已无，此处为修改行，
                    let length1 = this.$refs.tab3.Data.length;
                    let length2 = this.$refs.tab3.DataClone.length;
                    for (let index1 = 0; index1 < length1; index1++) {
                        let item1 = this.$refs.tab3.Data[index1];
                        for (let index2 = 0; index2 < length2; index2++) {
                            let item2 = this.$refs.tab3.DataClone[index2];
                            // console.log('123', !_.isEqual(item1, item2), item1, item2);
                            item2._XID = item1._XID
                            if (item1.id == item2.id && !_.isEqual(item1, item2)) {
                                item1.update = 1;
                                console.log('123123123', this.$refs.tab3.Data, item1);
                            }
                        }
                    }

                    let res = await UpdEquipInformation(dataJson);
                    /**
                    * 5-1。    保存失败。重置记录。
                    * 5-2。    保存成功。执行保存的函数，执行重置记录。
                    * 5-3。    取消操作。重置记录。
                    */
                    if (!res) {
                        this.isClickSaveBtn = false;
                        return
                    }
                    if (res.data.code == 0) {
                        showLoading();
                        this.isChangeFlg = true;
                        /**
                         *      是否通过保存按钮出现的弹框
                        */

                        if (this.isClickSaveBtn) {
                            eventBus.$emit('isChangeName', this.leftCodName)
                        } else {
                            eventBus.$emit('isChangeName', this.leftCodName)
                            // eventBus.$emit('EveSySViewRefreshList');
                            if (this.$store.state.isCurrentFn) {
                                this.$store.state.isCurrentFn();
                            }
                        }
                        this.$store.commit("reSetIsCurrent");
                        this.isClickSaveBtn = false;
                        this.$message.success(res.data.msg);
                        hideLoading();

                        return
                    }
                    this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
                })
                .catch(() => {
                    this.$store.state.isCurrentFn();
                    this.$store.commit("reSetIsCurrent");
                    this.isClickSaveBtn = false;
                });
        },

        //  获取提示信息
        async GetSysIntelligenceMsgFn(type) {
            let dataJson = {
                // PltCode: this.PltCode,
                // MacName: this.$refs.tab1.Data.codName,
                type: 1
            };
            let res = await GetEquipVerify(dataJson);
            return res.data.msg;
        },

        //  取消按钮
        CancelFn() {
            this.$refs.tab1.GetEquipInformationFn();
            this.$refs.tab2.GetComprehensiveEvaluationDataFn();
            this.$refs.tab3.GetSysIntelligenceFn();
            this.$refs.tab4.GetSysIntelligenceFn();
        },

        // 获取label的值
        async getEnvLabelFn() {
            showLoading();
            let dataJosn = {
                LawCode: 1,
                CtgCode: 1,
            }
            let res = await getEnvLabel(dataJosn);
            this.Label = res.data.data.systemIntelligence;
            hideLoading();
        },
    },

    created() {
        this.getEnvLabelFn();
    },
    mounted() {
        eventBus.$on("EventBusEvaluationInfoSaveFn", () => {
            this.saveFn();
        })
    },
    beforeDestroy() {
        eventBus.$off("EventBusEvaluationInfoSaveFn")
    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.CompontensViews {
    width: 100%;
    height: 100%;

    .add {
        min-height: 70px;
        width: 71.2%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 26px 0 12px 0;

        button {
            // background-color: #fff;
            width: 82px;
            height: 32px;
        }

        .pl15 {
            padding-left: 15px;
        }

        .form-ipt {
            width: 200px;
            height: 24px;

            ::v-deep .el-input__inner {
                height: 24px;
                background: #fff;
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }
    }
}

.bs-tabs {
    margin-top: 16px;
    width: 72%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // div {
    //     width: 50%;
    // }

    .el-button {
        margin-left: 0px;
        min-width: 155px;
        width: 155px;
        border-radius: 2px !important;
    }

    .red {
        background-color: rgb(188, 0, 15);
        color: #FFF;
    }

    .addBtn {
        .el-button {
            min-width: 82px;
            width: 82px;
            border-radius: 4px !important;
        }
    }
}

.container {
    position: relative;
    width: 100%;
    height: calc(100% - 172px);
    display: flex;
    justify-content: space-between;
    // margin-top: 4px;
}

.content-center {
    width: 72%;
    max-height: calc(100% - 51px);
    overflow-y: auto;
    border: 1px solid #c3c3c3;
}

.right-container-view {
    height: 100%;
    width: calc(38% - 15px);
    margin-left: 20px;
}

.footer {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    bottom: 5px;
    left: 0;
    transform: translateY(3px);

    button {
        width: 123px;
        padding: 0 15px;
        height: 32px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        text-align: center;
        line-height: 32px;
        margin-right: 16px;
        border-radius: 0;
    }

    .okBTn {
        // background: #106ebe;
        // color: #fff;
    }
}

.elx-table--empty-content {
    transform: translateY(30px);
}

.other-btn {
    background-color: #FFF;
    border-radius: 0 !important;
}
</style>
